<template>
  <el-row>
    <el-col :span="19">
      <el-card class="box-card" style="margin-bottom: 10px">
          <div contenteditable="true" class="title"  >
              <input type="text" style="font-size: 20px;width: 700px;" v-model="paperTitle" @change="sendTitle">
          </div>
          <div contenteditable="true" class="body" >
              <input type="text" style="font-size: 16px;width: 700px;" v-model="paperNotice">
          </div>
        <div class="total_score">
          <p class="top">总分</p>
          <div style="text-align: center"><p class="bottom">{{this.totalScore}}</p></div>
        </div>
      </el-card>
        <el-card class="duration-endtime" style="margin-bottom: 10px; height: 175px;width: 900px; padding: 3px 20px;">
            <div  class="duration">
                <div class="ti">
                    <span>
                    请在此设置考试时长：
                    </span>
                    <el-input placeholder="以分钟为单位"  style="font-size: 16px;width: 330px;" v-model="valueT"/>
                </div>
                <div class="ti">
                    <span>
                    请设置试卷的及格线：
                    </span>
                    <el-input placeholder="本次试卷分数线"  style="font-size: 16px;width: 330px;" v-model="passscore"/>
                </div>
                <div class="ti">
                    <span>
                    请设置考试起止日期：
                </span>
                    <el-date-picker class="data" v-model="valueData1" value-format="yyyy-MM-dd" @change="getData1" type="date" placeholder="选择日期">
                    </el-date-picker><span style="margin: 0 7px; color: RGB(204,208,214)">—</span>
                    <el-date-picker class="data" v-model="valueData2" value-format="yyyy-MM-dd" @change="getData2" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
        </el-card>
      <div class="tixing" v-if="tixing">
            <p>
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-gongyi"></use></svg>&nbsp;点击题型或&nbsp;<svg class="icon" aria-hidden="true"><use xlink:href="#icon-kaoshi_moren2x"></use></svg>&nbsp;将题型拖入此区域
            </p>
      </div>
      <div class="question" v-if="show">
          <el-card style="font-size: 16px;width: 900px; padding: 18px 20px; color: #484848; margin-bottom: 8px" @click="showOpt" v-for="(item, id) in List" :key="id">
              <div class="dele">
                  <span class="sign" v-if="signShow(id)">*</span>
                  {{ id + 1 }}
                  <input type="text" style="font-size: 16px;" v-model="item.content">
                  <span class="iconfont icon-huishouzhan2" v-on:click="delRadio(id)"></span>
                <span class="score" v-if="item.info">（最高分值：{{item.score}}）</span>
              </div>
              <div class="radioShow" v-if="item.Rshow">
                  <div  v-for = "(itm,idx) in item.rad" :key="idx">
                      <el-radio style="display: block; padding: 5px 0" v-model="item.radioOpt" :label="idx">
                          <input type="text" v-model="itm.label"/>
                          <div @click="delOneRadio(idx)" class="set" style="display: inline-block">
                              <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-huishouzhan"></use>
                              </svg>
                          </div>
                          <span v-show="judgeCorrect(idx,id) === 'True'" style="color:#00bf6f;">（正确答案）</span>
                      </el-radio>
                  </div>
                  <div class="edit-opt" v-if="optShow">
                      <div class="wz" @click="addOne(id)"><el-link :underline="false" type="primary"><svg t="1621945914861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14512" width="200" height="200"><path d="M925.8 454H562V113.2c0-23.5-15.7-42.6-35-42.6s-35 19.1-35 42.6V454H128.2c-23.5 0-42.6 15.7-42.6 35 0 19.4 19.1 35 42.6 35H492v386.8c0 23.5 15.7 42.6 35 42.6 19.4 0 35-19.1 35-42.6V524h363.8c23.5 0 42.6-15.7 42.6-35s-19.1-35-42.6-35z" fill="" p-id="14513"></path></svg>&nbsp;&nbsp;添加单个选项</el-link></div>
                    <div class="wz" @click="editShow(id)"><span class="el-icon-edit-outline" style="font-size: 15px">编辑题目</span></div>
                  </div>
              </div>
              <div class="multipleShow" v-if="item.Mshow">
                  <el-checkbox v-for="(ite, idm) in item.mul" :key="idm" v-model="ite.checked1" style="display: block; padding: 5px 0"  :label="ite">
                      <input class="mulInput"  type="text" v-model="ite.label"/>
                      <div class="set" @click="delOneMul(idm)"  style="display: inline-block">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huishouzhan"></use>
                          </svg>
                      </div>
                      <span v-show="checkJudge(idm,id) === 'True'" style="color:#00bf6f;">（正确答案）</span>
                  </el-checkbox>
                  <div class="edit-opt" v-if="optShow">
                      <div class="wz" @click="addMul(id)"><el-link :underline="false" type="primary"><svg t="1621945914861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14512" width="200" height="200"><path d="M925.8 454H562V113.2c0-23.5-15.7-42.6-35-42.6s-35 19.1-35 42.6V454H128.2c-23.5 0-42.6 15.7-42.6 35 0 19.4 19.1 35 42.6 35H492v386.8c0 23.5 15.7 42.6 35 42.6 19.4 0 35-19.1 35-42.6V524h363.8c23.5 0 42.6-15.7 42.6-35s-19.1-35-42.6-35z" fill="" p-id="14513"></path></svg>&nbsp;&nbsp;添加单个选项</el-link></div>
                      <div class="wz" @click="editShow(id)"><span class="el-icon-edit-outline" style="font-size: 15px">编辑题目</span></div>
                  </div>
              </div>
              <div class="name" v-if="item.nameShow">
                  <input style="border: 1px solid RGB(216,216,216); border-radius: 4px"  type="text" v-model="item.answer"/>
              </div>
              <div class="sex" v-if="item.sexShow">
                  <el-radio style="display: block; padding: 8px 0" v-model="item.radiosex" label="1">男</el-radio>
                  <el-radio style="display: block; padding: 8px 0" v-model="item.radiosex" label="2">女</el-radio>
              </div>
              <div class="stuNum" v-if="item.numShow">
                  <input style="border: 1px solid RGB(216,216,216); border-radius: 4px"  type="text" v-model="item.answer"/>
              </div>
              <div class="major" v-if="item.majorShow">
                  <input style="border: 1px solid RGB(216,216,216); border-radius: 4px"  type="text" v-model="item.answer"/>
              </div>
              <div class="class" v-if="item.classShow">
                  <input style="border: 1px solid RGB(216,216,216); border-radius: 4px"  type="text" v-model="item.answer"/>
              </div>
              <div class="tianK" v-if="item.tianKShow">
                  <input style="border: 1px solid RGB(216,216,216); border-radius: 4px;margin: 20px 0"  type="text" v-model="item.answer"/>
                <div class="edit-opt" v-if="optShow">
                  <div class="wz" @click="editShow(id)"><span class="el-icon-edit-outline" style="font-size: 15px">编辑题目</span></div>
                </div>
              </div>
              <div class="ask" v-if="item.askShow">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容" style="border: 1px solid RGB(216,216,216); border-radius: 4px; margin: 20px 0"  v-model="item.answer"/>
                <div class="edit-opt" v-if="optShow">
                  <div class="wz" @click="editShow(id)"><span class="el-icon-edit-outline" style="font-size: 15px">编辑题目</span></div>
                </div>
              </div>
            <div class="sex" v-if="item.pdShow">
              <div>
                <el-radio style="display: block; padding: 8px 0" v-model="item.radiOpd" :label="1">对
                  <span v-show="panOne(id) === 'True'" style="color:#00bf6f;">（正确答案）</span>
                </el-radio>
                <el-radio style="display: block; padding: 8px 0" v-model="item.radiOpd" :label="2">错
                  <span v-show="panTwo(id) === 'True'" style="color:#00bf6f;">（正确答案）</span>
                </el-radio>
              </div>
              <div class="edit-opt" v-if="optShow">
                <div class="wz" @click="editShow(id)"><span class="el-icon-edit-outline" style="font-size: 15px">编辑题目</span></div>
              </div>
            </div>
          </el-card>
      </div>
        <el-card class="box-card" style="height: 240px">
            <div class="block" style="font-size: 16px; color: #484848">
                <el-select v-model="value" placeholder="请选择" style="margin-bottom: 30px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>&nbsp;时显示
                <input type="text" style="display: block; font-size: 16px;width: 700px; margin: auto; text-align: center;color: #484848" v-model="success">
            </div>
            <el-button class="release" type="primary" :plain="true" style="background-color: RGB(38,114,255);display: block; margin: 35px auto;color: white" @click="releaseExam">保存试题</el-button>
        </el-card>
    </el-col>

    <el-col :span="5">
      <create-exam-footer @editShow="editPar"></create-exam-footer>
    </el-col>
  </el-row>
</template>

<script>
    import {toChinesNum } from '../../../uits/tools'
    import CreateExamFooter from "@/views/CreateExam/CreateExamChildren/CreateExamFooter";
export default {
  name: "CreateExamMain",
  data() {
    return {
        isShow:false,
        tixing: true,
        paperTitle: '考试标题',
        paperNotice: "感谢您抽出时间来参加本次考试，现在我们开始吧!",
        duration:0,
        radio: '',
        show: false,
        id: 0,
        optShow: true,
      showSet: false,
      drawer: true,
      titleId: '',
      totalScore: 0,
        // signShow: false,
        valueTime:'',
        valueT:'',
        valueData1:'',
        valueData2:'',
        valueD1:'',
        valueD2:'',
        passscore:'',
        // info:false,
        List: [
          {
             content: '',
            score:0,
              rad:[
                  {
                      radioOpt:'',
                      radioOpt1: '',
                      correct: 'false'
                  }
              ],
          },
            {
                content: '',
                score:0,
                require: false,
              mul:[
                  {
                    checked1: '',
                    checked1Opt: '',
                    correct: 'false'
                  }
              ]
          },
            {
              content: '',
              require: false,
              score:0,
              answer: '',
              correct: ''
            },
          {
            content: '',
            score:0,
            require: false,
            pan:[
              {
                radioOpt:'',
                radioOpt1: '',
                correct: 'false'
              },
              {
                radioOpt:'',
                radioOpt1: '',
                correct: 'false'
              }
            ],
          }
      ],
        success: '您已完成本次考试！',
        value: [],
        options: [{
                value: 'zhengchang',
                label: '正常完成'
            },{
                value: 'tiqian',
                label: '提前结束',
            }]
    }
  },
    created(){
      this.List = [];
    },
  components: {
    CreateExamFooter
  },
  computed: {
      watchRadioD(){
          return this.$store.state.radioD;
      },
      watchMul(){
          return this.$store.state.multipleD;
      },
      watchName(){
          return this.$store.state.name;
      },
      watchSex(){
          return this.$store.state.sex;
      },
      watchNum(){
          return this.$store.state.stuNum;
      },
      watchMajor(){
          return this.$store.state.major;
      },
      watchClass(){
          return this.$store.state.tClass;
      },
      watchTianK(){
          return this.$store.state.tianK;
      },
      watchAsk(){
          return this.$store.state.ask;
      },
      watchPanD(){
          return this.$store.state.panD;
      },
      getTitleId(){
        return this.$store.state.titleId;
      },
      getTotalScore(){
        return this.$store.state.totalScore;
      },
      watchRelease(){
          return this.$store.state.release;
      }
  },
 watch: {
     watchRelease(){//发布试题
         this.$confirm('你要发布此试题《'+ this.paperTitle +'》吗?', '发布确认', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'success'
         }).then(() => {
             var datas =[];
             var answer = [];
             this.List.forEach(function (value, index){
                 if(value.questiontype === 1){
                     value.rad.forEach(function(valueR, indexR){
                         answer.push({
                             istrue: valueR.correct,
                             answer: valueR.label
                         });
                     });
                     datas.push({
                         questiontype: value.questiontype,
                         questioncontent: value.content,
                         createperson: 'admin',
                         // examid: 1,
                         answer: answer,
                         score: value.score
                     });
                     answer =[];
                 }else if(value.questiontype === 2){
                     value.mul.forEach(function(valueM, indexM){
                         answer.push({
                             istrue: valueM.correct,
                             answer: valueM.label
                         });
                     });
                     datas.push({
                         questiontype: value.questiontype,
                         questioncontent: value.content,
                         createperson: 'admin',
                         // examid: 1,
                         answer: answer,
                         score: value.score
                     });
                     answer =[];
                 }
                 else if(value.questiontype === 3){
                     value.pan.forEach(function(valueP, indexP){
                         answer.push({
                             istrue: valueP.correct,
                             answer: valueP.label
                         });
                     });
                     datas.push({
                         questiontype: value.questiontype,
                         questioncontent: value.content,
                         createperson: 'admin',
                         // examid: 1,
                         answer: answer,
                         score: value.score
                     });
                     answer =[];
                 } else if(value.questiontype === 4){
                     answer.push({
                         answer: value.correct
                     });
                     datas.push({
                         questiontype: value.questiontype,
                         questioncontent: value.content,
                         createperson: 'admin',
                         // examid: 1,
                         answer: answer,
                         score: value.score
                     });
                     answer =[];
                 }else if(value.questiontype === 5){
                     var stuinfo = value.content;
                     console.log(stuinfo);
                     datas.push({
                         questiontype: value.questiontype,
                         stuinfo: stuinfo,
                         createperson: 'admin',
                     });
                 }else if(value.questiontype === 6){
                     datas.push({
                         questiontype: value.questiontype,
                         questioncontent: value.content,
                         createperson: 'admin',
                         score: value.score
                     });
                 }
             });
             this.$axios.post('exam/create',
                 {
                     duration: this.valueT,
                     endtime: this.valueD2+" "+'23:59:59',
                     examdesc: this.paperNotice,
                     examname: this.paperTitle,
                     passscore: this.passscore,
                     starttime: this.valueD1+" "+'00:00:00',
                     status: 1,
                     totalscore: this.totalScore
                 }).then(res => {
                 console.log(res);
             });
             this.$axios.post('exam/addQuestionByBatch',
                 datas
             ).then(res => {
                 console.log(res);
             });
             this.$message({
                 showClose: true,
                 message: '试题发布成功！',
                 type: 'success'
             });
             this.$router.push("/PublishProject");
         }).catch(() => {
             this.$message({
                 type: 'success',
                 message: '已取消发布此试题'
             });
         });

     },
     watchRadioD(){

           this.tixing=false;
           this.show = true;
           this.List.push({
             content: '请选择一个选项',
             require: false,
             score:0,
             questiontype: 1,
               radioOpt:'',
             rad: [{
                  label: '选项一',correct: 'false'
             }],
             num: this.watchRadioD,
             Rshow:true,
               info:true
           });
     },
     watchMul(){
         this.tixing=false;
         this.show = true;
         this.List.push({
           content: '请选择一个选项',
           require: false,
           score:0,
           questiontype: 2,
           mul: [{
             checked1:'',label: '选项一', correct: 'false'
           }],
           Mshow:true,
             info:true
         });
     },
     watchName(){
           this.tixing=false;
           this.show = true;
           this.List.push({
               score:0,
              content: '姓名',
               answer: '',
               questiontype: 5,
               nameShow: true,
               info: false
           })
     },
     watchSex(){
           this.tixing=false;
           this.show = true;
           this.List.push({
               content: '性别',
               radiosex: '',
               questiontype: 5,
               sexShow: true,
               info: false,
               score:0,
           })
     },
     watchNum(){
         this.tixing=false;
         this.show = true;
         this.List.push({
             content: '学号',
             answer: '',
             questiontype: 5,
             numShow:true,
             info: false,
             score:0,
         })
     },
     watchMajor(){
         this.tixing=false;
         this.show = true;
         this.List.push({
             content: '专业',
             answer: '',
             questiontype: 5,
             majorShow:true,
             info: false,
             score:0,
         })
     },
     watchClass(){
         this.tixing=false;
         this.show = true;
         this.List.push({
             content: '班级',
             answer: '',
             questiontype: 5,
             classShow:true,
             info: false,
             score:0,
         })
     },
     watchTianK(){
           this.tixing=false;
           this.show = true;
           this.List.push({
               content: '请填写本项内容',
               require: false,
               score:0,
               questiontype: 4,
               answer: '',
               correct: '',
               tianKShow:true,
               info: true,
           })
     },
     watchAsk(){
           this.tixing=false;
           this.show = true;
           this.List.push({
               content: '请填写本项内容',
               require: false,
               score:0,
               questiontype: 6,
               answer: '',
               correct: '',
               askShow:true,
               info: true,
           })
     },

     watchPanD(){
       this.tixing=false;
       this.show = true;
       this.List.push({
         content: '请填写本项内容',
         require: false,
         score:0,
         questiontype: 3,
         pan: [{
           radioOpt:'',label: '对',correct: 'false'
         },
           {
             radioOpt:'',label: '错',correct: 'false'
           }],
           info: true,
         pdShow:true
       })
     },
     getTitleId(){
       this.titleId = this.$store.state.titleId.titleId;
     },
     getTotalScore(){
       this.totalScore = this.$store.state.totalScore.totalScore;
     },

    List(){
        if(this.List === []) {
            this.tixing=true;
        }
        },
 },
  methods: {
      delOneRadio(id){
          this.List.forEach(function(v, i){
              for(let v1 in v){
                  if(v1 === "rad"){
                      v[v1].splice(id,1);
                  }
              }
          });
      },
      delOneMul(id){
          this.List.forEach(function(v, i){
              for(let v1 in v){
                  if(v1 === "mul"){
                      v[v1].splice(id,1);
                  }
              }
          });
      },
        delRadio(id){
          this.List.splice(id,1);
          this.totalScore = 0;
          for (let i in this.List){
            this.totalScore += parseInt(this.List[i].score)
          }
        },
        addOne(e){
            let obj = {};
            obj.radioOpt = "";
            obj.label = "选项" + toChinesNum(this.List[e].rad.length+1);
            // obj.correct = "";
          obj.correct = 'false';
          this.List[e].rad.push(obj)
        },
      addMul(e){
          let objm = {};
          objm.checked1 ='';
          objm.label = "选项" + toChinesNum(this.List[e].mul.length+1);
            objm.correct = 'false';
          this.List[e].mul.push(objm);
      },
      showOpt(){
          console.log("kkk");
          this.optShow = true;
      },

      sendTitle(){
        this.$store.commit('getPaperTitle',{
          paperTitle: this.paperTitle
        });
      },
      editShow(id){
        this.$store.commit('showDrawer',{
          drawer: this.drawer
        });
        this.$store.commit('getList',{
          list: this.List[id]
        });
        this.$store.commit('getId',{
          questionId: id
        });
        this.$store.commit('getTotList',{
          totList: this.List
        });

      },
      editPar(edit){
        this.List[this.titleId].require = edit;
      },
      signShow(id){
        if(this.List[id].require === true)
          return true;
        return false;
      },
      judgeCorrect(idx,id){
        if(this.List[id].rad[idx].correct === 'True')
          return 'True';
        return 'false';
      },
      checkJudge(idm,id) {
        if(this.List[id].mul[idm].correct === 'True')
          return 'True';
        return 'false';
      },
      panOne(id){
        if(this.List[id].pan[0].correct === 'True')
          return 'True';
        return 'false';
      },
      panTwo(id){
        if(this.List[id].pan[1].correct === 'True')
          return 'True';
        return 'false';
      },

      releaseExam(){//保存试题
          this.$confirm('你要保存此试题《'+ this.paperTitle +'》吗?', '保存确认', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
          }).then(() => {
              var datas =[];
              var answer = [];
              this.List.forEach(function (value, index){
                  if(value.questiontype === 1){
                      value.rad.forEach(function(valueR, indexR){
                          answer.push({
                              istrue: valueR.correct,
                              answer: valueR.label
                          });
                      });
                      datas.push({
                          questiontype: value.questiontype,
                          questioncontent: value.content,
                          createperson: 'admin',
                          answer: answer,
                          score: value.score
                      });
                      answer =[];
                  }else if(value.questiontype === 2){
                      value.mul.forEach(function(valueM, indexM){
                          answer.push({
                              istrue: valueM.correct,
                              answer: valueM.label
                          });
                      });
                      datas.push({
                          questiontype: value.questiontype,
                          questioncontent: value.content,
                          createperson: 'admin',
                          // examid: 1,
                          answer: answer,
                          score: value.score
                      });
                      answer =[];
                  }
                  else if(value.questiontype === 3){
                      value.pan.forEach(function(valueP, indexP){
                          answer.push({
                              istrue: valueP.correct,
                              answer: valueP.label
                          });
                      });
                      datas.push({
                          questiontype: value.questiontype,
                          questioncontent: value.content,
                          createperson: 'admin',
                          answer: answer,
                          score: value.score
                      });
                      answer =[];
                  } else if(value.questiontype === 4){
                      answer.push({
                          answer: value.correct
                      });
                      datas.push({
                          questiontype: value.questiontype,
                          questioncontent: value.content,
                          createperson: 'admin',
                          answer: answer,
                          score: value.score
                      });
                      answer =[];
                  }else if(value.questiontype === 5){
                      var stuinfo = value.content;
                      datas.push({
                          questiontype: value.questiontype,
                          stuinfo: stuinfo,
                          createperson: 'admin',
                      });
                  }else if(value.questiontype === 6){
                      datas.push({
                          questiontype: value.questiontype,
                          questioncontent: value.content,
                          createperson: 'admin',
                          // text: value.correct,
                          score: value.score
                      });
                  }
              });
              this.$axios.post('exam/create',
                  {
                      duration: this.valueT,
                      endtime: this.valueD2+" "+'00:00:00',
                      examdesc: this.paperNotice,
                      examname: this.paperTitle,
                      passscore: this.passscore,
                      starttime: this.valueD1+" "+'00:00:00',
                      status: 0,
                      totalscore: this.totalScore
                  }).then(res => {
                  console.log(res);
              });
              this.$axios.post('exam/addQuestionByBatch',
                  datas
              ).then(res => {
                  console.log(res);
              });
              this.$message({
                  message: '试题保存成功！',
                  type: 'success'
              });
              // setInterval(()=>{//异步
              //     this.$router.push("/Mine");
              // }, 3000);
              this.$router.push("/Mine");
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消保存此试题'
              });
          });


      },
    //   getTime(valueTime){
    //       this.valueTime = valueTime;
    //       var time = this.valueTime.split("-");
    //       var hour = time[0];
    //       var minit = time[1];
    //       // var second = time[2];
    //       // this.valueT = hour + ":" + minit + ":" + second;
    //       this.valueT = hour*60+minit;
    //       console.log(this.valueT);
    // },
      getData1(valueData1){
            this.valueData1 = valueData1;
            this.valueD1 = valueData1;
          console.log("起始日期"+this.valueData1);
      },
      getData2(valueData2){
          this.valueData2 = valueData2;
          this.valueD2 = valueData2;
          console.log("截止日期"+this.valueData2);
      }
  }
}
</script>

<style scoped>
    .tixing {
        height: 320px;
        width: 900px;
        padding: 17px 20px;
        margin-bottom: 17px;
        margin-top: 17px;
        border: 1px dashed RGB(38,114,255);
        border-radius: 4px;
    }
    .tixing p {
        font-size: 16px;
        text-align: center;
        line-height: 300px;
    }
    .tixing p svg {
        color: RGB(34,114,252);
        font-size: 25px;
    }
    .set svg {
        margin-left: 17px;
        font-size: 23px;
        color: RGB(170,170,170);
    }
    .set svg:hover{
        color: RGB(39,113,255);
    }
    .block {
        text-align: center;
    }
.box-card {
  position: relative;
    width: 900px;
    height: 120px;
    padding: 17px 20px;
}

    .total_score {
      position: absolute;
      right: 15px;
      top: 40px;
      width: 80px;
      height: 80px;
      border-radius: 10px;
      /*background-color: #00Bf6f;*/
      background-color: #B3C0D1;
      color: white;
    }
    .total_score .top {
      font-size: 15px;
      margin: 5px 0 2px 27px;
    }
    .total_score .bottom {
      font-size: 35px;
      font-weight: bold;
    }

.box-card .title,.body, .duration {
  width: 700px;
  height: 42px;
  line-height: 42px;
  padding: 3px 10px;
}

[contenteditable]:focus {
  outline: none;
}
input {
    height: 35px;
    border: 1px dashed RGB(255,255,255);
    word-wrap: break-word;
    outline: none;
}
.question input {
    width: 600px;
    display: inline-block;
    color: #484848;
    text-indent: 2px;
}
input:hover {
    border:1px dashed #707070;
}
.question input:focus{
    background-color: RGB(244,244,244);
    border:1px dashed RGB(255,255,255);
}
  .dele {
      position: relative;
  }
  .dele .sign {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 17px;
    color: red;
  }
      .dele .score {
        position: absolute;
        right: 130px;
        top:10px;
        font-size: 14px;
      }

  .dele span{
      color: RGB(170,170,170);
       font-size: 19px;
      font-weight: 700;
       position: absolute;
      top: 20px;
       right: 20px;
   }
    .dele span:hover{
        color: RGB(37,114,254);
    }
    .wz {
        display: inline-block;
        margin-right: 10px;
        width: 120px;
        height: 30px;
        color: RGB(38,114,255);
        font-size: 20px;
        text-align: center;
    }
    .wz:hover {
        background-color: RGB(244,244,244);
        color: RGB(78,172,234);
    }
    .data {
        display: inline-block;
        width: 150px;
    }
    .ti {
        margin: 0 90px;
        padding-bottom: 5px;
    }
</style>
